<template>
  <div class="order-refund-detail-header">
    <div class="order-refund-detail-status-top">
      <div class="order-refund-detail-status-title">{{ statusTitle }}</div>
      <div class="order-refund-detail-succeeded-time" v-if="showSucceeded">{{ refund.succeededTime }}</div>
      <div class="order-refund-detail-succeeded-time" v-if="showDisapproved">{{ refund.disapprovalReason }}</div>
      <div class="order-refund-detail-succeeded-time" v-if="showFailed">{{ refund.failReason }}</div>
    </div>
    <white-space v-if="showSucceeded"/>
    <div class="order-refund-detail-steps-content" v-if="showSucceeded">
      <div class="van-hairline--bottom order-refund-detail-steps-amount">
        <price prefix="退款金额:" :value="refund.amount" color="#000"/>
        <div class="order-refund-detail-steps-amount-tips">
          <van-icon name="warning-o" style="margin-right: 4px"/>
          退款将返还您实际的支付金额。
        </div>
      </div>
      <van-steps :active="3">
        <van-step>
          <div class="order-refund-detail-steps-name">买家申请</div>
          <div>{{ refund.appliedTime }}</div>
        </van-step>
        <van-step>
          <div class="order-refund-detail-steps-name">卖家同意</div>
          <div>{{ refund.approvedTime }}</div>
        </van-step>
        <van-step>
          <div class="order-refund-detail-steps-name">退款到账</div>
          <div>{{ refund.succeededTime }}</div>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<script>
import { order } from "@mall/api-services"
import { Icon, Step, Steps } from "vant"
import WhiteSpace from "@/components/WhiteSpace"
import Price from "@/components/Price"

const { OrderDisputeStatus } = order

export default {
  name: "OrderRefundDetailHeader",
  components: {
    Price,
    WhiteSpace,
    [Icon.name]: Icon,
    [Step.name]: Step,
    [Steps.name]: Steps,
  },
  props: {
    refund: order.OrderRefund,
  },
  computed: {
    statusTitle() {
      const { refund } = this
      const { status } = refund
      if (OrderDisputeStatus.Applying === status) {
        return "退款申请等待商家处理"
      } else if (OrderDisputeStatus.Pending === status) {
        return "商家已审批，正在退款中"
      } else if (OrderDisputeStatus.Succeeded === status) {
        return "退款成功"
      } else if (OrderDisputeStatus.Disapproved === status) {
        return "退款申请未通过"
      } else if (OrderDisputeStatus.Failed === status) {
        return "退款失败"
      } else {
        return "未知"
      }
    },
    showSucceeded() {
      const { refund } = this
      const { status } = refund
      return status === OrderDisputeStatus.Succeeded
    },
    showDisapproved() {
      const { refund } = this
      const { status } = refund
      return status === OrderDisputeStatus.Disapproved
    },
    showFailed() {
      const { refund } = this
      const { status } = refund
      return status === OrderDisputeStatus.Failed
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.order-refund-detail-header {
  .order-refund-detail-status-top {
    background: #fff;
    padding: 9px;

    .order-refund-detail-status-title {
      font-size: 15px;
      display: flex;
      align-items: center;
      font-weight: 700;
    }

    .order-refund-detail-succeeded-time {
      display: flex;
      margin-top: 4px;
      font-size: 13px;
    }
  }

  .order-refund-detail-steps-content {
    background: #fff;
    padding: 8px;

    .order-refund-detail-steps-amount {
      padding: 0 0 8px 0;
      font-size: 14px;

      .price {
        font-size: 14px;
      }
    }

    .order-refund-detail-steps-amount-tips {
      display: flex;
      align-items: center;
      color: $gray-6;
      font-size: 12px;
    }
  }

  .order-refund-detail-steps-name {
    font-size: 14px;
  }

  ::v-deep {

    .van-step--horizontal {
      &:first-child {
        .van-step__circle-container {
          left: 26%;
        }

        .van-step__line {
          width: 65%;
          right: 0;
          left: initial;
        }
      }

      .van-step__line {
        width: 68%;
      }

      &:last-child {
        .van-step__circle-container {
          right: 41%;
        }

        .van-step__line {
          width: 0;
          right: 0;
          left: initial;
        }
      }
    }

    .van-step__circle-container, .van-step__line {
      top: 0;
    }

    .van-steps__items {
      padding-bottom: 0;
    }

    .van-step__title {
      margin-top: 6px;
      text-align: center;
    }
  }
}
</style>
